<template>
	<div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_center">
				<span class="baiColor">服务中心申请资料</span>
			</div>
		</div>

		<div class="center" style="padding-top: 47px;">
			<form action="" ref="myform">
				<div class="topO">
					<section>
						<p class="pull-left">
							<span>姓名</span>
						</p>
						<div class="pull-right">
							<input type="text" name="name" v-model="name" required="required" placeholder="请输入申请人姓名" />
							<i class="iconfont">&#xe615;</i>
						</div>
					</section>
					<section>
						<p class="pull-left">
							<span>证件类型</span>
						</p>
						<div class="pull-right nokuo">
							<span>身份证</span>
						</div>
					</section>
					<section :class="isNumC === true ? 'active':''">
						<p class="pull-left">
							<span>证件号码</span>
						</p>
						<div class="pull-right">
							<!--因为身份证号有Xx,所以类型是text-->
							<input type="text" name="numbers" required="required" ref="input_card" @blur="blurCard" minlength="15" v-model="numbers" placeholder="请输入身份证号" />
							<i class="iconfont">&#xe615;</i>
						</div>
					</section>

				</div>
				<section class="name">
					<p class="pull-left">
						<span>服务中心名称</span>
					</p>
					<div class="pull-right">
						<input type="text" name="fuze" required="required" v-model="centername" placeholder="请输入服务中心名称" />
						<i class="iconfont">&#xe615;</i>
					</div>
				</section>
				<div class="topQ">
					<section :class="isNum === true ? 'active':''">
						<p class="pull-left">
							<span>手机号码</span>
						</p>
						<div class="pull-right">
							<input type="number" name="tele" @blur="blurPhone" ref="input_phone" required="required" minlength="7" v-model="tele" placeholder="请输入手机号" />
							<i class="iconfont">&#xe615;</i>
						</div>
					</section>
					<section>
						<p class="pull-left">
							<span>实际负责人</span>
						</p>
						<div class="pull-right">
							<input type="text" name="fuze" required="required" v-model="fuze" placeholder="实际负责人" />
							<i class="iconfont">&#xe615;</i>
						</div>
					</section>
					<section>
						<p class="pull-left">
							<span>经营场所面积</span>
						</p>
						<div class="pull-right">
							<span></span>
							<input type="number" name="area" required="required" v-model="area" placeholder="经营场所面积" />
							<i class="iconfont">&#xe615;</i>
						</div>
					</section>
					<section>
						<p class="pull-left">
							<span>申请类型</span>
						</p>
						<div class="pull-right nokuo">
							<form action="">
								<select name="type" v-model="types" class="right sele">
									<!--注意：下拉菜单的背景颜色没改-->
									<option disabled value="">请选择</option>
									<option v-for="(card,ins) in typeshen" :value="card.value" :key="card.value">
										{{card.type}}
									</option>
								</select>
							</form>
						</div>
					</section>
				</div>
				<div class="topT name">
					<section>
						<p class="">
							<span>上传店面门口照片</span>
						</p>
						<div class="ceme">
							<div class="pic">
								<input type="file" @change="chooseImage($event,1)" class="photo1" multiple accept="image/*" name="photo1" />

								<div class="absou">
									<span class="iconfont i">&#xe6ad;</span>
									<p>上传图片</p>
								</div>
							</div>
							<div class="pic" v-if="files.length == 0">
								<span class="jia">
								<b class="b1"></b>
								<b class="b2"></b>
							</span>
							</div>
							<div class="pic" v-else>
								<img v-for="i in files" :src="i" class="images" :key="i">
							</div>
						</div>
					</section>
					<section>
						<p class="">
							<span>上传店内照片</span>
						</p>
						<div class="ceme">
							<div class="pic">
								<input type="file" @change="chooseImage($event,2)" class="photo2" multiple accept="image/*" name="photo2" />
								<div class="absou">
									<span class="iconfont i">&#xe6ad;</span>
									<p>上传图片</p>
								</div>
							</div>
							<div class="pic" v-if="files2.length == 0">
								<span class="jia">
								<b class="b1"></b>
								<b class="b2"></b>
							</span>
							</div>
							<div class="pic" v-else>
								<img v-for="i in files2" :src="i" class="images" :key="i">
							</div>
						</div>
					</section>
				</div>
				<div class="topT">
					<section>
						<p class="">
							<span>上传协议签订照片</span>
						</p>
						<div class="ceme">
							<div class="pic">
								<input type="file" @change="chooseImage($event,3)" class="photo3" multiple name="photo3" accept="image/*" />
								<div class="absou">
									<span class="iconfont i">&#xe6ad;</span>
									<p>上传图片</p>
								</div>
							</div>
							<div class="pic" v-if="files3.length == 0">
								<span class="jia">
								<b class="b1"></b>
								<b class="b2"></b>
							</span>
							</div>
							<div class="pic" v-else>
								<img v-for="i in files3" :src="i" class="images" :key="i">
							</div>
						</div>
					</section>
					<section>
						<p class="">
							<span>上传主要人员职务分工表照片</span>
						</p>
						<div class="ceme">
							<div class="pic">
								<input type="file" @change="chooseImage($event,4)" class="photo4" multiple accept="image/*" name="photo4" />
								<div class="absou">
									<span class="iconfont i">&#xe6ad;</span>
									<p>上传图片</p>
								</div>
							</div>
							<div class="pic" v-if="files4.length == 0">
								<span class="jia">
								<b class="b1"></b>
								<b class="b2"></b>
							</span>
							</div>
							<div class="pic" v-else>
								<img v-for="i in files4" :src="i" class="images" :key="i">
							</div>
						</div>
					</section>
				</div>
				<div class="topN name">
					<section class="hao">
						<p class="pull-left">
							<span>营业执照号</span>
						</p>
						<div class="pull-right">
							<input type="number" name="yingyehao" required="required" v-model="yingyehao" placeholder="营业执照号" />
							<i class="iconfont">&#xe615;</i>
						</div>
					</section>
					<section class="xianq">
						<p class="chuan">
							<span>上传营业执照</span>
						</p>
						<div class="ceme">
							<div class="pic">
								<input type="file" @change="chooseImage($event,5)" class="photo5" multiple accept="image/*" name="photo5" id="" value="" />
								<div class="absou">
									<span class="iconfont i">&#xe6ad;</span>
									<p>上传图片</p>
								</div>
							</div>
							<div class="pic" v-if="files5.length == 0">
								<span class="jia">
								<b class="b1"></b>
								<b class="b2"></b>
							</span>
							</div>
							<div class="pic" v-else>
								<img v-for="i in files5" :src="i" class="images" :key="i">
							</div>
						</div>
					</section>
				</div>
				<div class="topE name">
					<section class="hao">
						<p class="pull-left groups_left">
							<span>店铺地址</span>
						</p>
						<div class="pull-right group ellipsis01">
							<x-address title="" v-model="value" raw-value :list="addressData"></x-address>
							<p class="hidden" :value="getName(value)"></p>
						</div>
					</section>
					<section class="qian">
						<p class="pull-left">
							<input type="text" name="addressDetail" required="required" v-model="addressDetail" placeholder="街道、楼牌号等" />
						</p>
					</section>
				</div>
				<button class="fuwu" @click="submits($event)">提交</button>
			</form>
		</div>
			
	</div>

</template>
<script>
	import { XInput, Group, XButton, Cell,XAddress, ChinaAddressV4Data, Value2nameFilter as value2name } from 'vux'
	export default {
		components: {
			XInput,
			Group,
			XButton,
			Cell,
			XAddress,
			ChinaAddressV4Data,
		},
		data() {
			return {
				isNum: false,	//验证手机号
				isNumC: false,	//验证身份号
				value: ['广东省', '中山市', '--'],	//默认地址
				addressData: ChinaAddressV4Data,	//中国地址
				name: "",	//绑定名字
				num: '',	//向后台传的身份证
				numbers: '',	//绑定身份证
				tele: "",	//手机号
				fuze: "",	//负责人
				centername: '',	//服务中心名称
				area: "",	//经营场所面积
				types: "",	//申请类型
				yingyehao: "",	//营业执照
				//店铺具体地址	
				addressDetail: '',	//店铺具体地址
//				productImage: [],
				value1:[],
				files: [],files2: [],files3: [],files4: [],files5: [],
				img1:{},img2:{},img3:{},img4:{},img5:{},
				typeshen: [
					{
						value: "1",
						type: "个人"
					},
					{
						value: "2",
						type: "企业"
					},
				],
//				imgs:[],
//				arr:'',
			};
		},
		mounted: function() {

		},
		methods: {
			getName(value) {
				this.value1 = value2name(value, ChinaAddressV4Data)
			},
			//把证件号码中间部分的数字用****代替
			secret: function() {
				this.num = this.numbers;
				var str = this.numbers.toString().substr(1, this.numbers.toString().length - 2);
				this.numbers = this.numbers.toString().replace(str, "****************");

			},
			//验证身份证号
			blurCard: function() {
				var testCard = new RegExp(
					/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/
				);
				var cardValue = this.$refs.input_card.value;
				if(testCard.test(cardValue) && cardValue != "") {
					this.isNumC = false;
					this.secret();
				} else {
					this.isNumC = true;
					this.numbers = "";
				}
				
			},
			//		验证手机号
			blurPhone: function() {
				var testPhone = new RegExp(
					/^1((3[0-9]{1})|(45)|(47)|(5[0-9]{1})|(76)|(77)|(78)|(8[0-9]{1}))\d{8}$/
				);
				var PhoneValue = this.$refs.input_phone.value;
				if(testPhone.test(PhoneValue) && PhoneValue != "") {
					this.isNum = false;
				} else {
					this.isNum = true;
					this.tele = "";
				}
			},
			
			//上传图片
			chooseImage(event,num) {
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				params.append('token', info); //客户秘钥（信息）
				var formData = new FormData();
				formData.append('token', info);
				formData.append('path', "scImg");
				formData.append('width', 70);
				formData.append('height', 70);
				formData.append('img', event.target.files[0]);
				this.$axios({
					url: '/One/Upload/uploadImg',
					method: 'post',
					data: formData,
				}).then((res) => {
					this.img1 = res.data.data
				}).catch(function() {
					alert("返回错误")
				});
				
				this.$axios({
					url: '/One/Upload/uploadImg', 
					method: 'post',
					data: formData,
				}).then((res) => {
					this.img2 = res.data.data
				}).catch(function() {
					alert("返回错误")
				});
				
				this.$axios({
					url: '/One/Upload/uploadImg', 
					method: 'post',
					data: formData,
				}).then((res) => {
					this.img3 = res.data.data
				}).catch(function() {
					alert("返回错误")
				});
				
				this.$axios({
					url: '/One/Upload/uploadImg',
					method: 'post',
					data: formData,
				}).then((res) => {
					this.img4 = res.data.data
				}).catch(function() {
					alert("返回错误")
				});
				
				this.$axios({
					url: '/One/Upload/uploadImg',
					method: 'post',
					data: formData,
				}).then((res) => {
					this.img5 = res.data.data
				}).catch(function() {
					alert("返回错误")
				});
				
				for(var i = 0; i < event.target.files.length; i++) {
					var url = URL.createObjectURL(event.target.files[0]);
					if(event.currentTarget.name == 'photo1') {
						this.files.push(url);
					} else if(event.currentTarget.name == 'photo2') {
						this.files2.push(url);
					} else if(event.currentTarget.name == 'photo3') {
						this.files3.push(url);
					} else if(event.currentTarget.name == 'photo4') {
						this.files4.push(url);
					} else if(event.currentTarget.name == 'photo5') {
						this.files5.push(url);
					}
				}
			},

			//点击保存提交
			submits: function(ev) {
				ev.preventDefault();
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				params.append('token', info); //客户秘钥（信息）
				params.append('uname', this.name); //申请人名字
				params.append('idno', this.num); //证件号码
				params.append('name', this.centername); //服务中心名称
				params.append('phone', this.tele); //手机号码
				params.append('leader', this.fuze); //实际负责人
				params.append('site_area', this.area); //经营场所面积
				params.append('type', this.types); //申请类型
				params.append('site', this.value1); //店铺地址
				params.append('dm', this.img1)
				params.append('dn', this.img2)
				params.append('xy', this.img3)
				params.append('fg', this.img4)
				params.append('yyzz', this.img5); //上传图片
				params.append('license', this.yingyehao); //营业执照号
				params.append('street', this.addressDetail); //店铺具体地址
				this.$axios({
					url: "/One/My/myServeC",
					method: "POST",
					data: params
				}).then((res) => {
					//进行判断,如果成功要跳转页面
					if(res.data.status == 1){
						this.$router.push({name: 'shenhe'});
					}else{
						alert('请把信息填写完整')
					}
				}).catch(function(err) {
					console.log(err)
				})
			},
		}
	};
</script>

<style scoped="scoped">
	@import "../css/public.css";
	@import "../css/iFuWuInfo.css";
	.groups_left{
		width:25%;
		min-width: 90px;
	}
	.group {
		width: 60%;
		height:40px;
		line-height: 38px;
		padding-right: 10px;
	}
	/*源css*/
	input {
		text-align: right;
		height: 38px;
		line-height: 38px;
		font-size: 15px;
		color: #999;
	}
	.center section .pull-right{
		width:60%;
		overflow: hidden;
	}
	
	.pull-right input{
		width: 85%;
		text-align: right;
	}
	.nokuo {
		margin-right: 8px;
		text-align: right;
		padding-right: 13px;
	}
	
	section.active {
		border: solid 0.5px red !important;
		height: 38px;
	}
	form select {
		height: 38px;
		line-height: 38px;
		font-size: 15px;
		color: #999;
		margin-left: 65%;
	}
	
	.nokuo span {
		height: 38px;
		line-height: 38px;
	}
	
	button {
		display: inline-block;
		background: #f3961f;
		width: 100%;
		height: 44px;
		border-radius: 10px;
		font-size: 15px;
		color: #ffffff;
		margin: 16px 0;
	}
</style>